<template>
  <div class="home">
    <!-- 英雄区域 -->
    <section class="hero">
      <div class="hero-content">
        <h1>打造专属于你的<br /><span class="highlight">理想电脑</span></h1>
        <p>一站式电脑DIY装机平台，帮你选择最合适的配件，确保兼容性，提供最优性价比方案</p>
        <div class="hero-buttons">
          <router-link to="/builder" class="btn-primary">开始装机</router-link>
          <router-link to="/recommendations" class="btn-secondary">查看推荐</router-link>
        </div>
      </div>
      <div class="hero-image">
        <!-- 这里可以放置一个电脑相关的图片 -->
        <div class="hero-img-placeholder"></div>
      </div>
    </section>

    <!-- 特色功能 -->
    <section class="features">
      <div class="features-container">
        <h2>我们的特色功能</h2>
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25"></path>
                <line x1="8" y1="16" x2="8.01" y2="16"></line>
                <line x1="8" y1="20" x2="8.01" y2="20"></line>
                <line x1="12" y1="18" x2="12.01" y2="18"></line>
                <line x1="12" y1="22" x2="12.01" y2="22"></line>
                <line x1="16" y1="16" x2="16.01" y2="16"></line>
                <line x1="16" y1="20" x2="16.01" y2="20"></line>
              </svg>
            </div>
            <h3>配件库</h3>
            <p>海量电脑配件数据，包含CPU、GPU、内存、主板等各种配件的详细参数和价格信息</p>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="16 18 22 12 16 6"></polyline>
                <polyline points="8 6 2 12 8 18"></polyline>
              </svg>
            </div>
            <h3>兼容性检查</h3>
            <p>智能分析配件之间的兼容性，避免购买不匹配的配件，确保装机顺利进行</p>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="8" x2="12" y2="12"></line>
                <line x1="12" y1="16" x2="12.01" y2="16"></line>
              </svg>
            </div>
            <h3>推荐方案</h3>
            <p>根据预算和使用场景，智能推荐最优性价比的装机方案，帮你省钱又省心</p>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                <line x1="8" y1="21" x2="16" y2="21"></line>
                <line x1="12" y1="17" x2="12" y2="21"></line>
              </svg>
            </div>
            <h3>装机配置</h3>
            <p>自由选择各种配件，实时查看总价和兼容性，轻松完成装机配置</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 推荐配置 -->
    <section class="recommended-builds">
      <div class="container">
        <h2>热门推荐配置</h2>
        <div class="builds-grid">
          <div class="build-card" v-for="build in recommendedBuilds" :key="build.name">
            <div class="build-header">
              <h3>{{ build.name }}</h3>
              <span class="price">¥{{ build.price.toLocaleString() }}</span>
            </div>
            <div class="build-components">
              <div class="component-item">
                <span class="component-type">CPU</span>
                <span class="component-name">{{ build.components.cpu }}</span>
              </div>
              <div class="component-item">
                <span class="component-type">GPU</span>
                <span class="component-name">{{ build.components.gpu }}</span>
              </div>
              <div class="component-item">
                <span class="component-type">主板</span>
                <span class="component-name">{{ build.components.motherboard }}</span>
              </div>
            </div>
            <div class="build-footer">
              <button class="btn-view-details">查看详情</button>
            </div>
          </div>
        </div>
        <div class="view-more">
          <router-link to="/recommendations" class="btn-secondary">查看更多推荐</router-link>
        </div>
      </div>
    </section>

    <!-- 用户评价 -->
    <section class="testimonials">
      <div class="container">
        <h2>用户怎么说</h2>
        <div class="testimonials-grid">
          <div class="testimonial-card" v-for="testimonial in testimonials" :key="testimonial.id">
            <div class="testimonial-header">
              <div class="user-avatar">{{ testimonial.user.name.charAt(0) }}</div>
              <div class="user-info">
                <h4>{{ testimonial.user.name }}</h4>
                <p>{{ testimonial.user.role }}</p>
              </div>
            </div>
            <div class="testimonial-content">
              <p>{{ testimonial.content }}</p>
            </div>
            <div class="testimonial-rating">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="#FFD700" stroke="#FFD700" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-for="_ in 5" :key="_">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
// 模拟推荐配置数据
const recommendedBuilds = [
  {
    name: '游戏主力配置',
    price: 12999,
    components: {
      cpu: 'Intel Core i7-13700K',
      gpu: 'NVIDIA RTX 4070 Ti',
      motherboard: 'ASUS ROG STRIX Z790-A'
    }
  },
  {
    name: '性价比办公配置',
    price: 5999,
    components: {
      cpu: 'Intel Core i5-13600K',
      gpu: '集成显卡',
      motherboard: 'MSI B760M MORTAR'
    }
  },
  {
    name: '发烧级工作站',
    price: 19999,
    components: {
      cpu: 'AMD Ryzen 9 7950X',
      gpu: 'NVIDIA RTX 4080',
      motherboard: 'Gigabyte X670E AORUS MASTER'
    }
  }
];

// 模拟用户评价数据
const testimonials = [
  {
    id: 1,
    user: {
      name: '张先生',
      role: '游戏爱好者'
    },
    content: '使用这个平台配置的电脑，不仅价格合理，而且兼容性完美，游戏体验非常流畅！'
  },
  {
    id: 2,
    user: {
      name: '李女士',
      role: '设计师'
    },
    content: '作为一名设计师，需要一台高性能的电脑。这个平台帮我找到了最适合我的配置，节省了很多时间和精力。'
  },
  {
    id: 3,
    user: {
      name: '王先生',
      role: '学生'
    },
    content: '预算有限，但还是想配一台不错的电脑。推荐系统帮我找到了性价比很高的方案，非常满意！'
  }
];
</script>

<style scoped>
.home {
  overflow-x: hidden;
}

/* 英雄区域 */
.hero {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: white;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 80% 20%, rgba(0, 204, 255, 0.1) 0%, transparent 50%);
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1;
  position: relative;
}

.hero h1 {
  font-size: 3.5rem;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

.hero .highlight {
  color: #00ccff;
}

.hero p {
  font-size: 1.2rem;
  color: #ccc;
  margin: 0 0 2rem 0;
  max-width: 600px;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
}

.hero-image {
  display: none;
}

.hero-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #00ccff, #0066cc);
  border-radius: 10px;
  opacity: 0.2;
}

/* 特色功能 */
.features {
  padding: 5rem 0;
  background-color: #f5f5f5;
}

.features-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.features h2 {
  text-align: center;
  font-size: 2.5rem;
  margin: 0 0 3rem 0;
  color: #1a1a1a;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-card {
  background-color: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  color: #00ccff;
  margin-bottom: 1.5rem;
}

.feature-card h3 {
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
  color: #1a1a1a;
}

.feature-card p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* 推荐配置 */
.recommended-builds {
  padding: 5rem 0;
  background-color: white;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.recommended-builds h2 {
  text-align: center;
  font-size: 2.5rem;
  margin: 0 0 3rem 0;
  color: #1a1a1a;
}

.builds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.build-card {
  background-color: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.build-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.build-header {
  background-color: #1a1a1a;
  color: white;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.build-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.build-header .price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #00ccff;
}

.build-components {
  padding: 1.5rem;
}

.component-item {
  display: flex;
  margin-bottom: 1rem;
  align-items: center;
}

.component-item:last-child {
  margin-bottom: 0;
}

.component-type {
  background-color: #00ccff;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  margin-right: 1rem;
  white-space: nowrap;
}

.component-name {
  color: #1a1a1a;
  font-size: 0.9rem;
}

.build-footer {
  padding: 1rem 1.5rem;
  background-color: #e5e5e5;
  text-align: right;
}

.btn-view-details {
  background-color: #1a1a1a;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-view-details:hover {
  background-color: #333;
}

.view-more {
  text-align: center;
  margin-top: 2rem;
}

/* 用户评价 */
.testimonials {
  padding: 5rem 0;
  background-color: #f5f5f5;
}

.testimonials h2 {
  text-align: center;
  font-size: 2.5rem;
  margin: 0 0 3rem 0;
  color: #1a1a1a;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.testimonial-card {
  background-color: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.testimonial-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.user-avatar {
  width: 50px;
  height: 50px;
  background-color: #00ccff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 1rem;
}

.user-info h4 {
  margin: 0;
  color: #1a1a1a;
}

.user-info p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

.testimonial-content p {
  color: #333;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}

.testimonial-rating {
  display: flex;
  gap: 0.25rem;
}

/* 按钮样式 */
.btn-primary, .btn-secondary {
  padding: 1rem 2rem;
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn-primary {
  background-color: #00ccff;
  color: #1a1a1a;
}

.btn-primary:hover {
  background-color: #00a3cc;
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  color: #00ccff;
  border: 2px solid #00ccff;
}

.btn-secondary:hover {
  background-color: #00ccff;
  color: #1a1a1a;
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (min-width: 768px) {
  .hero-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .hero h1 {
    font-size: 4rem;
  }
  
  .hero-image {
    display: block;
    width: 40%;
    height: 300px;
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .hero p {
    font-size: 1rem;
  }
  
  .features h2, .recommended-builds h2, .testimonials h2 {
    font-size: 2rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
  }
}
</style>